<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png"/>
        <h1>vue-map</h1>
        <bmap
            class="bmap-wrap"
            :ak="ak"
            :center="center"
            :zoom="zoom"
            :scroll-wheel-zoom="true"
            @ready="readyFun"
            @click="handleMapClick"
        >
            <b-marker :position="center" :dragging="true"></b-marker>
            <template v-for="(item, index) of colorPoints">
                <b-polyline :path="item" :strokeColor="getLineColorBySpeed(colorLine[index][0].speed)"></b-polyline>
            </template>
            <b-lushu
                    :path="carPoints"
                    :rotation="true"
                    :speed="_speed"
                    :icon="icon"
                    :content="content"
                    :autoView="true"
                    :play="play"
                    :end="end"
                    :dispose="dispose"
                    @stop="onStop()"
                    @start="onStart()"
            ></b-lushu>
        </bmap>
        <input v-model="speed" type="text" placeholder="请输入速度">
        <input v-model="progress" type="text" placeholder="请输入进度1~6">
        <div class="form-wrap">
            <button id="start" @click="playFun">开始</button>
            <button id="pause" @click="pauseFun">暂停</button>
            <button id="continue" @click="playFun">继续</button>
            <button id="end" @click="stopFun">结束</button>
        </div>
    </div>
</template>

<script>
    import Bmap from "@/components/vue-baidu-map/components/map/Map.vue";
    import BMarker from "@/components/vue-baidu-map/components/overlays/Marker.vue";
    import BPolyline from "@/components/vue-baidu-map/components/overlays/Polyline.vue";
    import BLushu from "@/components/vue-baidu-map/components/extra/Lushu.vue";

    export default {
        name: "Vuemap",
        components: {
            Bmap,
            BMarker,
            BPolyline,
            BLushu
        },
        data() {
            return {
                ak: 'pPurcozpqQVKnZg8NTG2peBYbxVZj5rx',
                center: {lng: 116.404, lat: 39.915},
                zoom: 15,
                icon: {
                    url: 'http://lbs.baidu.com/jsdemo/img/car.png',
                    size: {
                        width: 52,
                        height: 26
                    },
                    opt: {anchor : {width: 27, height: 23}}
                },
                prevPath: [],
                path: [
                    {lng: 116.40374847445713, lat: 39.923356024137384, speed: 10},
                    {lng: 116.39756813254849, lat: 39.92346669203684, speed: 20},
                    {lng: 116.39778372587088, lat: 39.91422530140359, speed: 80},
                    {lng: 116.41115051185935, lat: 39.91433598417785, speed: 30},
                    {lng: 116.40949762972099, lat: 39.92374336099664, speed: 50},
                    {lng: 116.40353288113474, lat: 39.92407536226086, speed: 20}
                    ],
                points: [],
                carPoints: [],
                speed: 500,
                content: `<div>信息框html</div>`,
                play: true,
                end: false,
                progress: 1,
                dispose: false,
                runTimer: null
            }
        },
        mounted() {
        },
        computed: {
            pathPoint() {
                const {BMap} = this
                return BMap && this.path.map(item => {
                    return new BMap.Point(item.lng, item.lat)
                })
            },
            _speed() {
                return parseInt(this.speed)
            },
            // 多色线二维数组
            colorLine() {
                let linearr = [];
                this.path.forEach((item, index) => {
                    if(this.path[index + 1]) {
                        linearr.push([
                            item, this.path[index + 1]
                        ])
                    }
                })
                return linearr
            }
        },
        watch: {
            progress(val) {
                val = val && parseInt(val) || 0
                switch (val) {
                    case 2:
                        this.carPoints = this.points.slice(2)
                        break;
                    case 3:
                        this.carPoints = this.points.slice(3)
                        break;
                    case 4:
                        this.carPoints = this.points.slice(4)
                        break;
                    case 5:
                        this.carPoints = this.points.slice(5)
                        break;
                    default:
                        this.carPoints = this.points
                }
                this.disposeFun()
                this.$nextTick(()=>{
                    this.play = true
                })
            }
        },
        methods: {
            setPath() {
                if(this.runTimer) clearInterval(this.runTimer);
                let len = this.prevPath.length;
                let i = 0;
                this.runTimer = setInterval(() =>{
                    this.path.push(this.prevPath);
                    i++;
                }, 1000)
            },
            readyFun({BMap, map}) {
                console.log(BMap, map)
                this.setPath();
                this.BMap = BMap;
                this.map = map
                // this.center.lng = 116.404
                // this.center.lat = 39.915
                // this.zoom = 18
                this.icon = {
                    url: 'http://lbs.baidu.com/jsdemo/img/car.png',
                    size: new BMap.Size(52,26),
                    opt: {anchor : new BMap.Size(27, 23)}
                }
                this.points = this.path.map(item => {
                    return new BMap.Point(item.lng, item.lat)
                })
                this.carPoints = this.points
                this.colorPoints = this.colorLine.map((item, index) => {
                    return [new BMap.Point(item[0].lng, item[0].lat), new BMap.Point(item[1].lng, item[1].lat)]
                })
            },
            handleMapClick(e) {
                console.log(e.point)
                const {BMap, map} = this
                var InfoWindow = new BMap.InfoWindow(`<div>${e.point.lng}, ${e.point.lat}</div>`,{width:200,height: 80})
                map.openInfoWindow(InfoWindow, e.point)
            },
            getLineColorBySpeed(speed) {
                let _color = '';
                if(speed >= 20 && speed < 40) {
                    _color = '#13c2c2'
                }else if(speed >= 40 && speed < 60){
                    _color = '#ff4d4f'
                }else if(speed >= 60 && speed < 80){
                    _color = '#f5222d'
                }else if(speed >= 80 && speed < 100){
                    _color = '#cf1322'
                }else if(speed >= 100){
                    _color = '#820014'
                }else{
                    _color = '#096dd9'
                }
                return _color
            },
            playFun(){
                this.end = false
                if(this.play == true) {
                    this.play = false
                    this.$nextTick(()=>{
                        this.play = true
                    })
                }else{
                    this.play = true
                }
            },
            pauseFun(){
                this.play = false
            },
            stopFun() {
                this.play = false
                this.end = true
            },
            disposeFun() {
                this.dispose = true
            },
            onStart() {
                this.play = true
                this.end = false
            },
            onStop() {
                console.log('stop', this.play)
                // this.play = false
                this.end = true
                // this.$nextTick(()=>{
                //     this.play = true
                // })
            }
        }
    };
</script>
<style lang="scss" scoped>
    .bmap-wrap{
        width: 100%;
        height: 500px;
    }
    .form-wrap{
        margin: 20px 0;
        button{
            margin: 0 5px;
        }
    }
</style>